<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">

    <script src="./js/index.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/loading.js"></script>
    <script src="./js/underscore.js"></script>
</head>

<body>
    <div class="box">
        <!-- 头部 -->
        <div class="head">
            <div class="head_top width clearfix">
                <img src="./images/logo.png">
                <div class="search_nav right">
                    <input type="text" placeholder="请输入想要的商品" value="">
                    <button id="search">搜索</button>
                </div>
            </div>
            <div class="head_dw width clearfix">
                <ul class="nologin">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="./view/login.html">登录</a></li>
                    <li><a href="./view/register.html">注册</a></li>
                </ul>
                <ul class="login">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="./view/shopCar.html">购物车</a></li>
                    <li><a href="./view/login.html" id="quit">退出登录</a></li>
                </ul>
                <div class="search_nav right mar">
                    <input type="text" placeholder="请输入想要的商品" value="">
                    <button id="search">搜索</button>
                </div>
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="classify width clearfix">
            <ul>
                <li><a href="#">咖啡</a></li>
                <li><a href="#">饮食</a></li>
                <li><a href="#">正餐</a></li>
                <li><a href="#">男装</a></li>
                <li><a href="#">女装</a></li>
                <li><a href="#">眼镜</a></li>
                <li><a href="#">鞋靴</a></li>
            </ul>
        </div>
        <!-- 轮播 -->
        <div class="lunbo width">
            <!-- 核心滚动区域 -->
            <ul class="imgs">
                <li><img src="./images/a.jpg" alt=""></li>
                <li><img src="./images/b.jpg" alt=""></li>
                <li><img src="./images/c.jpg" alt=""></li>
                <li><img src="./images/d.jpg" alt=""></li>
                <li><img src="./images/e.jpg" alt=""></li>
            </ul>
            <!-- 小圆点 -->
            <ul class="cricle"></ul>
            <a href="javascript:;" class="lt">&lt;</a>
            <a href="javascript:;" class="gt">&gt;</a>
        </div>
        <!-- 商品列表 -->
        <div class="goods width clearfix"> </div>
        <!-- 返回顶部 -->
        <div class="returnTop">
            <img src="./images/上箭头.png">
        </div>
    </div>
</body>
<script>
    window.addEventListener('load', function () {
        var loader = createLoading({
            src: './images/loading.jpg',
        }).show();
        // 导航栏       
        var page = 1;      //当前是第几页
        var goods = document.querySelector(".goods");
        //渲染商品列表
        function getShopList() {
            REQUEST.get("/goodList", {
                params: {
                    page: page++,
                }
            }, function (data) {
                var div = document.createElement("div");
                div.classList.add("page", "clearfix");
                var html = '';
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    html +=
                        `
                <div class="list left" data-id="${item.Id}">
                    <img src="./images/loading.jpg" data-src="${item.img_list_url}">
                    <h3>${item.title}</h3>
                    <div class="list-dw clearfix">
                        <span class="price left">${item.price}</span>
                        <div class="mack right">${item.mack}</div>
                    </div>
                </div>
                `
                }
                div.innerHTML += html;
                goods.appendChild(div);

                linkDetail();
                //懒加载
                var imgs = document.querySelectorAll(".list>img");
                imgs = Array.from(imgs);
                window.onscroll = function (e) {
                    setTimeout(function () {
                        lazy(imgs);
                    }, 2000);
                }
                lazy(imgs);
                function lazy(imgs) {
                    for (var i = 0; i < imgs.length; i++) {
                        var height = imgs[i].offsetTop;
                        var wheight = window.innerHeight;
                        var sheight = document.documentElement.scrollTop;
                        if (height <= wheight + sheight) {
                            imgs[i].src = imgs[i].dataset.src;
                        }
                    }
                }
                setTimeout(() => {
                    loader.hide();
                }, 1000);
            });
        }
        getShopList();
        //获取商品列表，跳转到商品详情页
        function linkDetail() {
            var item = document.querySelectorAll('.list');
            for (var i = 0; i < item.length; i++) {
                (function (i) {
                    item[i].onclick = function () {
                        var id = item[i].getAttribute('data-id')
                        // console.log('商品id', id);
                        location.href = `./view/detail.html?goodId=${id}`
                    }
                })(i)
            }
        }

        //返回顶部
        var returnTop = document.querySelector('.returnTop');
        var timer = null;
        var isTop = true;

        window.addEventListener("scroll", function () {
            var box = document.documentElement;
            // console.log(box.clientHeight,box.scrollTop);
            if (Math.ceil(box.clientHeight + 500) <= box.scrollTop) {
                returnTop.style.display = "block";
            }
            else {
                returnTop.style.display = "none";
            }
            //回到顶部过程中用户滚动滚动条，停止定时器
            if (!isTop) {
                clearInterval(timer);
            };
            isTop = false;
        })
        //滚动条滚动时触发        
        window.addEventListener("scroll", function () {
            //显示回到顶部按钮
            var box = document.documentElement;
            // 当滚动到底后 让 返回顶部的div显示出来,可视高度+滚动上偏移量==滚动条高度            
            if (Math.ceil(box.clientHeight + box.scrollTop) == box.scrollHeight) {
                getShopList();
            }
        })
        //动画返回顶部
        returnTop.onclick = function () {
            //设置定时器
            timer = setInterval(function () {
                //获取滚动条距离顶部高度
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                var ispeed = Math.floor(-osTop / 7);
                document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
                //到达顶部，清除定时器
                if (osTop == 0) {
                    clearInterval(timer);
                };
                isTop = true;
            }, 30);
        };

        // 固定导航栏
        fixedD();
        //tab切换导航
        var lis = document.querySelectorAll(".head_dw li");
        // var oldIndex = 0;
        for (var i = 0; i < lis.length; i++) {
            // lis[i].index = i;
            (function (i) {
                lis[i].addEventListener("click", function () {
                    lis[i].classList.remove("active");
                    this.classList.add("active");
                    // oldIndex = this.index;
                })
            })(i)
        }

        // 搜索
        var input = document.querySelector("input");
        var search = document.querySelector("#search");
        search.addEventListener("click", function () {
            sessionStorage.setItem("key", input.value);
            location.href = "./view/search.html";
        })
        //分类导航
        var classifylis = document.querySelectorAll(".classify a");
        classifylis.forEach(function (item) {
            item.addEventListener("click", function () {
                localStorage.setItem("typeOne", item.innerHTML);
                location.href = "./view/fenlei.html";
            })
        })

        // 验证登录
        checkLogin();

    })
</script>

</html>